<template>
  <a-space direction="row">
    <a-tag :color="rateModeVal===1?'blue':'green'" bordered>
      {{ rateModeText }}
    </a-tag>
    <span class="ml-1">
      <template v-if="rateModeVal === 1">
        {{ levelIdText }}
      </template>
      <template v-else>
        直推{{ directRateVal }}%，
        间推{{ indirectRateVal }}%
      </template>
    </span>
  </a-space>
</template>

<script setup>

import {computed, defineProps} from "vue";
import {get} from "lodash";

const props = defineProps({
  record: {
    type: Object,
    default: () => {
      return {}
    }
  },
  column: {
    type: Object,
    default: () => {
      return {}
    }
  },
  dictTrans: {
    type: Function,
    default: () => {
      return ''
    }
  }
})

const rateModeIdx = props.column.dataIndex
// todo 待优化,先这样写死吧
const levelIdIdx = 'spec.level_id'
const directRateIdx = 'spec.direct_rate'
const indirectRateIdx = 'spec.indirect_rate'

// 计算属性
const rateModeVal = computed(() => {
  return Number(get(props.record, rateModeIdx))
})
const rateModeText = computed(() => {
  return props.dictTrans(rateModeIdx, rateModeVal.value)
})
const levelIdVal = computed(() => {
  return get(props.record, levelIdIdx)
})
const levelIdText = computed(() => {
  return props.dictTrans(levelIdIdx, levelIdVal.value)
})
const directRateVal = computed(() => {
  return get(props.record, directRateIdx)
})
const indirectRateVal = computed(() => {
  return get(props.record, indirectRateIdx)
})

</script>
